<template>
  <view class="content" :style="{ paddingTop: configStore.paddingTop + 10 + 'px' }">
    <hearbar></hearbar>
    <view class="back-white m-a p-a contentin">
      <view class="type class flex align-center">
        <text>话题：</text>
        <up-tabs :list="list_tabs" @click="tabsClick"></up-tabs>
      </view>
      <editor
        id="editor" show-img-size show-img-toolbar show-img-resize placeholder="请输入帖子内容"
        @ready="onEditorReady"
      >
      </editor>
      <view style="position: absolute;right: 0;bottom: 0;" class="flex">
        <up-icon name="weixin-fill" size="30" @click="show = true">
        </up-icon>
      </view>
      <up-popup :show="show">
        <emoVue @swiper-change="handleEmojiChange"></emoVue>
      </up-popup>
    </view>
    <up-button style="position: fixed;bottom: 0;" @click="confirm">
      发布帖子
    </up-button>
  </view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted,
	watch,
}
	from 'vue';
import {
	useConfigStore
}
	from '../../stores/modules/config';
import {
	addForum
}
	from '../../utils/api';
import emoVue from '../../components/emo.vue';
const show = ref(false);
let editorCtx = null;
const onEditorReady = () => {
	uni.createSelectorQuery().select('#editor').context((res) => {
		editorCtx = res.context
	}).exec()
}
const confirm = () => {
	editorCtx.getContents({
		success: ({
			html
		}) => {
			addForum({
				type:chose.value,
				content: html
			}).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
					uni.redirectTo({
						url: "/pages/forum/index"
					})
				}
			})
		}
	});
}
const cancel = () => {
	uni.redirectTo({
		url: "/pages/forum/index"
	})
}
const handleEmojiChange = (src) => {
	editorCtx.insertImage({
		src,
		width: "20",
		height: "20",
		nowrap: true
	})
	show.value = false;
}
const list_tabs = reactive([
	{
		name: '热门',
		value:"",
	},
	{
		name: '日常',
		value:1
	},
	{
		name: '焦宝',
		value:2
	},
	{
		name: '郁宝',
		value:3
	},
	{
		name: '迫宝',
		value:4
	}
]);
let chose = list_tabs[1];
const tabsClick = (item)=>{
	chose = item;
}
</script>

<style lang="less" scoped>
.contentin {
	padding-bottom: 60upx;
	position: relative;
	border-radius: 40upx;
}

.type {
	width: 100%;
	height: 100upx;
}
</style>